<template>
  <view class="trade-page" :style="{ paddingTop: menuInfo.bottom + 5 + 'px' }">
    <!-- 背景 -->
    <view class="bg-top"></view>

    <!-- 标签切换栏 - 主要功能菜单风格 -->
    <view class="trade-menu">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        class="trade-menu-card"
        :class="{ active: currentTab === index, 'idle-card': tab.id === 'idle', 'reward-card': tab.id === 'reward' }"
        @click="switchTab(index)"
      >
        <view class="trade-menu-content">
          <view class="trade-menu-left">
            <view class="trade-menu-title">{{ tab.name }}</view>
            <view class="trade-menu-info">{{ tab.subtitle }}</view>
          </view>
          <view class="trade-menu-icon" :class="tab.id + '-icon'">
            <tn-icon :name="tab.icon" size="50" color="#ffffff"></tn-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-container">
      <swiper class="content-swiper" :current="currentTab" @change="swiperChange">
        <!-- 二手交易内容 -->
        <swiper-item class="swiper-item">
          <view class="content-card">
            <!-- 二手交易列表 -->
            <scroll-view
              scroll-y
              class="scroll-view"
              @scrolltolower="loadMoreIdle"
              refresher-enabled
              @refresherrefresh="refreshIdle"
              :refresher-triggered="refreshTrigger"
              :lower-threshold="100"
            >
              <view class="idle-list">
                <view v-for="idle in idleList" :key="idle.id" class="idle-item" @click="navigateTo(`/pages/detail/idle-detail?id=${idle.id}`)">
                  <view class="idle-image">
                    <image :src="idle.mainImage" mode="aspectFill"></image>
                    <view class="idle-tag" :class="idle.type === 'sell' ? 'sell-tag' : 'buy-tag'">
                      {{ idle.type === 'sell' ? '出售' : '求购' }}
                    </view>
                  </view>
                  <view class="idle-info">
                    <view class="idle-title text-ellipsis-2">{{ idle.title }}</view>
                    <view class="idle-price">
                      <text class="price-symbol">¥</text>
                      <text class="price-value">{{ idle.price }}</text>
                    </view>
                    <view class="idle-user">
                      <image class="user-avatar" :src="idle.userAvatar" mode="aspectFill"></image>
                      <text class="user-name text-ellipsis">{{ idle.userName }}</text>
                      <text class="idle-time">{{ idle.createTime }}</text>
                    </view>
                  </view>
                </view>
              </view>

              <!-- 加载更多 -->
              <view class="load-more-wrapper">
                <view class="load-more" v-if="idleHasMore">
                  <tn-loading mode="circle"></tn-loading>
                  <text>加载更多...</text>
                </view>
                <view class="no-more" v-else>
                  <text>没有更多内容啦~</text>
                </view>
              </view>
            </scroll-view>
          </view>
        </swiper-item>

        <!-- 赏金任务内容 -->
        <swiper-item class="swiper-item">
          <view class="content-card">
            <!-- 赏金任务列表 -->
            <scroll-view
              scroll-y
              class="scroll-view"
              @scrolltolower="loadMoreReward"
              refresher-enabled
              @refresherrefresh="refreshReward"
              :refresher-triggered="refreshTrigger"
              :lower-threshold="100"
            >
              <view class="reward-list">
                <view v-for="reward in rewardList" :key="reward.id" class="reward-item" @click="navigateTo(`/pages/detail/reward-detail?id=${reward.id}`)">
                  <view class="reward-header">
                    <view class="reward-type" :class="reward.rewardType">
                      {{ reward.rewardType === 'pickup' ? '取件' : '求助' }}
                    </view>
                    <view class="reward-title text-ellipsis">{{ reward.title }}</view>
                    <view class="reward-amount">¥{{ reward.amount }}</view>
                  </view>
                  <view class="reward-content">
                    <view class="reward-desc text-ellipsis-2">{{ reward.content }}</view>
                    <view class="reward-address" v-if="reward.deliveryAddress">
                      <tn-icon name="map" size="24"></tn-icon>
                      <text class="text-ellipsis">{{ reward.deliveryAddress }}</text>
                    </view>
                  </view>
                  <view class="reward-footer">
                    <view class="reward-user">
                      <image class="user-avatar" :src="reward.userAvatar" mode="aspectFill"></image>
                      <text class="user-name text-ellipsis">{{ reward.userName }}</text>
                    </view>
                    <view class="reward-time">{{ reward.createTime }}</view>
                  </view>
                </view>
              </view>

              <!-- 加载更多 -->
              <view class="load-more-wrapper">
                <view class="load-more" v-if="rewardHasMore">
                  <tn-loading mode="circle"></tn-loading>
                  <text>加载更多...</text>
                </view>
                <view class="no-more" v-else>
                  <text>没有更多内容啦~</text>
                </view>
              </view>
            </scroll-view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 底部自定义TabBar -->
    <tab-bar></tab-bar>
  </view>
</template>

<script setup>
import { ref, onMounted, onActivated } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import TabBar from '@/components/tabbar/TabBar.vue';
import { onShow } from '@dcloudio/uni-app';

// 获取路由中的类型参数 - 使用onLoad接收页面参数
onLoad((options) => {
  console.log('页面参数:', options);
  if (options && options.type) {
    if (options.type === 'reward') {
      currentTab.value = 1;
    } else if (options.type === 'idle') {
      currentTab.value = 0;
    }
  }

  // 加载初始数据
  loadInitialData();
});

// 页面加载时的处理
onMounted(() => {
  // 获取微信小程序右上角胶囊按钮信息
  getMenuInfo();
  // onMounted中不再处理参数，参数处理移到onLoad中
  console.log('页面挂载完成');
});

// 微信小程序右上角胶囊按钮信息
const menuInfo = ref({
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  width: 0,
  height: 0
});
const getMenuInfo = () => {
  try {
    // 检查是否在微信小程序环境
    if (typeof wx !== 'undefined' && wx.getMenuButtonBoundingClientRect) {
      const rect = wx.getMenuButtonBoundingClientRect();
      if (rect) {
        menuInfo.value = rect;
        // console.log('menuinfo', menuInfo.value);
      }
    }
  } catch (error) {
    console.warn('获取胶囊按钮信息失败:', error);
    // 使用默认值，避免报错
    menuInfo.value = {
      top: 44, // 默认状态栏高度
      bottom: 88,
      left: 0,
      right: 0,
      width: 87,
      height: 32
    };
  }
};

// 标签数据
const tabs = [
  { name: '二手闲置', id: 'idle', icon: 'buy-fill', subtitle: '发布闲置物品，轻松交易' },
  { name: '赏金任务', id: 'reward', icon: 'sword-fill', subtitle: '完成任务，赚取奖励' }
];
const currentTab = ref(0);

// 刷新状态
const refreshTrigger = ref(false);

// 二手闲置数据
const idleList = ref([]);
const idleHasMore = ref(true);
const idleLoadCount = ref(0); // 记录加载次数

// 赏金任务数据
const rewardList = ref([]);
const rewardHasMore = ref(true);
const rewardLoadCount = ref(0); // 记录加载次数

// 切换标签
const switchTab = (index) => {
  currentTab.value = index;
};

// swiper切换事件
const swiperChange = (e) => {
  currentTab.value = e.detail.current;
};

// 页面导航
const navigateTo = (url) => {
  uni.navigateTo({
    url
  });
};

// 处理发布按钮点击
const handlePublish = () => {
  // 根据当前标签决定发布类型
  if (currentTab.value === 0) {
    uni.navigateTo({
      url: '/pages/publish/idle'
    });
  } else {
    uni.navigateTo({
      url: '/pages/publish/reward'
    });
  }
};

// 模拟数据池 - 二手闲置
const idleDataPool = [
  // 第一批数据
  [
    {
      type: 'sell',
      title: '全新MacBook Air M2 13寸 256G',
      price: 7200,
      mainImage: 'https://picsum.photos/id/180/300/300',
      category: '数码电子',
      description: '刚买一个月，因为换了Pro所以出售，99新'
    },
    {
      type: 'sell',
      title: '宿舍床上书桌 可折叠懒人桌',
      price: 45,
      mainImage: 'https://picsum.photos/id/181/300/300',
      category: '生活用品',
      description: '质量很好，搬宿舍用不上了'
    },
    {
      type: 'buy',
      title: '求购线性代数教材（同济版）',
      price: 25,
      mainImage: 'https://picsum.photos/id/182/300/300',
      category: '教材书籍',
      description: '下学期要用，有的同学联系我'
    },
    {
      type: 'sell',
      title: '九成新羽毛球拍 胜利牌',
      price: 120,
      mainImage: 'https://picsum.photos/id/183/300/300',
      category: '运动器材',
      description: '买了很少用，送球和球包'
    }
  ],
  // 第二批数据
  [
    {
      type: 'sell',
      title: '小米空气净化器4 Lite版',
      price: 280,
      mainImage: 'https://picsum.photos/id/184/300/300',
      category: '家用电器',
      description: '用了半年，效果很好，毕业甩卖'
    },
    {
      type: 'buy',
      title: '求购女生自行车 24寸或26寸',
      price: 200,
      mainImage: 'https://picsum.photos/id/185/300/300',
      category: '交通工具',
      description: '要求车况良好，有车筐最好'
    },
    {
      type: 'sell',
      title: '护肤品套装 SK-II神仙水+面霜',
      price: 680,
      mainImage: 'https://picsum.photos/id/186/300/300',
      category: '美妆护肤',
      description: '朋友送的，不太适合我的肤质'
    },
    {
      type: 'sell',
      title: '考研数学复习全套资料',
      price: 80,
      mainImage: 'https://picsum.photos/id/187/300/300',
      category: '教材书籍',
      description: '张宇、汤家凤全套，还有笔记'
    }
  ]
];

// 模拟数据池 - 赏金任务
const rewardDataPool = [
  // 第一批数据
  [
    {
      rewardType: 'pickup',
      title: '帮忙取中通快递两个包裹',
      amount: 15,
      content: '今天有课没时间去取，两个包裹都在学校北门中通站点，取件码分别是：AB123456、CD789012',
      deliveryAddress: '学生公寓15栋201'
    },
    {
      rewardType: 'help',
      title: '求助PS修图 证件照换底色',
      amount: 20,
      content: '需要把蓝底证件照换成白底，要求专业一点，用于求职简历，大概5张照片',
      deliveryAddress: null
    },
    {
      rewardType: 'pickup',
      title: '食堂三楼代买麻辣香锅',
      amount: 8,
      content: '现在排队人太多了，帮忙买个中份麻辣香锅，要土豆片、豆腐、生菜、午餐肉，微辣',
      deliveryAddress: '图书馆二楼自习区A座'
    },
    {
      rewardType: 'help',
      title: '搬宿舍需要帮手 两个人',
      amount: 60,
      content: '从7栋搬到12栋，东西不多主要是行李箱和一些生活用品，预计1小时，需要两个男生帮忙',
      deliveryAddress: '学生公寓7栋→12栋'
    }
  ],
  // 第二批数据
  [
    {
      rewardType: 'pickup',
      title: '代领快递柜包裹 丰巢快递柜',
      amount: 5,
      content: '在宿舍楼下丰巢快递柜，取件码：123456，是个小包裹，我现在在外地实习',
      deliveryAddress: '学生公寓8栋管理员处'
    },
    {
      rewardType: 'help',
      title: '英语四级口语陪练',
      amount: 40,
      content: '下周要考四级口语，想找个英语好的同学陪我练习1-2小时，主要是对话练习',
      deliveryAddress: null
    },
    {
      rewardType: 'pickup',
      title: '超市代买生活用品清单',
      amount: 12,
      content: '需要买：洗发水、牙膏、卫生纸、泡面4包，大概50元左右的东西，我转账给你',
      deliveryAddress: '学生公寓6栋楼下'
    },
    {
      rewardType: 'help',
      title: '帮忙组装宜家书桌',
      amount: 25,
      content: '买了个宜家的书桌，但是不会组装，需要一个动手能力强的同学帮忙，有工具',
      deliveryAddress: '学生公寓11栋305'
    }
  ]
];

// 加载初始数据
const loadInitialData = () => {
  // 加载闲置数据
  idleList.value = [
    {
      id: 1,
      type: 'sell',
      title: '9成新 Apple iPad Pro 11寸 256G',
      price: 3800,
      mainImage: 'https://picsum.photos/id/160/300/300',
      userAvatar: 'https://picsum.photos/id/1005/100/100',
      userName: '星遇用户1',
      createTime: '1小时前',
      category: '数码'
    },
    {
      id: 2,
      type: 'sell',
      title: '二手自行车，九成新，配有前筐和后座',
      price: 220,
      mainImage: 'https://picsum.photos/id/146/300/300',
      userAvatar: 'https://picsum.photos/id/1012/100/100',
      userName: '星遇用户2',
      createTime: '2小时前',
      category: '交通工具'
    },
    {
      id: 3,
      type: 'buy',
      title: '求购经济学原理第八版教材',
      price: 30,
      mainImage: 'https://picsum.photos/id/24/300/300',
      userAvatar: 'https://picsum.photos/id/1025/100/100',
      userName: '星遇用户3',
      createTime: '5小时前',
      category: '教材'
    }
  ];

  // 加载赏金数据
  rewardList.value = [
    {
      id: 1,
      rewardType: 'pickup',
      title: '帮忙取顺丰快递',
      amount: 10,
      content: '今天下午有课，没时间去取快递。快递在学校南门顺丰站点，取件码：1234567890，预计下午3点送达。',
      userAvatar: 'https://picsum.photos/id/1062/100/100',
      userName: '星遇用户4',
      createTime: '30分钟前',
      deliveryAddress: '综合楼A栋502'
    },
    {
      id: 2,
      rewardType: 'help',
      title: '帮忙辅导高数作业',
      amount: 50,
      content: '期末复习，高数微积分部分有几道题不太理解，需要有人辅导一下，约1小时左右，地点图书馆三楼自习室。',
      userAvatar: 'https://picsum.photos/id/1074/100/100',
      userName: '星遇用户5',
      createTime: '2小时前',
      deliveryAddress: null
    },
    {
      id: 3,
      rewardType: 'pickup',
      title: '食堂二楼代买小碗红烧肉套餐',
      amount: 5,
      content: '现在队太长了，麻烦有在食堂二楼的同学帮忙买个小碗红烧肉套餐，不要辣，加个荷包蛋。',
      userAvatar: 'https://picsum.photos/id/1027/100/100',
      userName: '星遇用户6',
      createTime: '40分钟前',
      deliveryAddress: '教学楼B栋304'
    }
  ];
};

// 加载更多闲置数据
const loadMoreIdle = () => {
  console.log('触发加载更多闲置数据，当前加载次数:', idleLoadCount.value);

  if (idleLoadCount.value >= 2) {
    idleHasMore.value = false;
    console.log('闲置数据已全部加载完成');
    return;
  }

  setTimeout(() => {
    const batchData = idleDataPool[idleLoadCount.value] || [];
    const newIdles = batchData.map((item, index) => ({
      id: idleList.value.length + index + 1,
      type: item.type,
      title: item.title,
      price: item.price,
      mainImage: item.mainImage,
      userAvatar: `https://picsum.photos/id/${1100 + idleList.value.length + index}/100/100`,
      userName: `星遇用户${idleList.value.length + index + 10}`,
      createTime: `${Math.floor(Math.random() * 12) + 1}小时前`,
      category: item.category
    }));

    idleList.value = [...idleList.value, ...newIdles];
    idleLoadCount.value++;

    console.log('闲置数据加载完成，新增数据:', newIdles.length, '条，总数据:', idleList.value.length, '条');

    // 如果已经加载了2次，设置为没有更多
    if (idleLoadCount.value >= 2) {
      idleHasMore.value = false;
    }
  }, 800);
};

// 刷新闲置数据
const refreshIdle = () => {
  refreshTrigger.value = true;

  setTimeout(() => {
    // 重置加载状态
    idleLoadCount.value = 0;
    idleHasMore.value = true;

    // 重新加载初始数据
    loadInitialData();

    refreshTrigger.value = false;
  }, 1000);
};

// 加载更多赏金任务
const loadMoreReward = () => {
  console.log('触发加载更多赏金任务，当前加载次数:', rewardLoadCount.value);

  if (rewardLoadCount.value >= 2) {
    rewardHasMore.value = false;
    console.log('赏金任务数据已全部加载完成');
    return;
  }

  setTimeout(() => {
    const batchData = rewardDataPool[rewardLoadCount.value] || [];
    const newRewards = batchData.map((item, index) => ({
      id: rewardList.value.length + index + 1,
      rewardType: item.rewardType,
      title: item.title,
      amount: item.amount,
      content: item.content,
      userAvatar: `https://picsum.photos/id/${1200 + rewardList.value.length + index}/100/100`,
      userName: `星遇用户${rewardList.value.length + index + 20}`,
      createTime: `${Math.floor(Math.random() * 8) + 1}小时前`,
      deliveryAddress: item.deliveryAddress
    }));

    rewardList.value = [...rewardList.value, ...newRewards];
    rewardLoadCount.value++;

    console.log('赏金任务数据加载完成，新增数据:', newRewards.length, '条，总数据:', rewardList.value.length, '条');

    // 如果已经加载了2次，设置为没有更多
    if (rewardLoadCount.value >= 2) {
      rewardHasMore.value = false;
    }
  }, 800);
};

// 刷新赏金任务
const refreshReward = () => {
  refreshTrigger.value = true;

  setTimeout(() => {
    // 重置加载状态
    rewardLoadCount.value = 0;
    rewardHasMore.value = true;

    // 重新加载初始数据
    loadInitialData();

    refreshTrigger.value = false;
  }, 1000);
};

onActivated(() => {
  // 当页面重新激活时，触发通知更新TabBar
  uni.$emit('updateTabBar');
});
</script>

<style lang="scss" scoped>
// 从uni.scss导入的颜色变量作为常量
$text-color: $uni-text-color;
$text-color-inverse: $uni-text-color-inverse;
$text-color-grey: $uni-text-color-grey;
$text-color-title: $uni-text-color-title;
$primary-color: $uni-color-primary;
$warning-color: $uni-color-warning;
$highlight-color: $uni-highlight-color;
$bg-color: $uni-bg-color;
$bg-color-grey: $uni-bg-color-grey;
$border-color: $uni-border-color;

.trade-page {
  min-height: 100vh;
  background-color: $bg-color-grey;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 200rpx; /* 为底部TabBar预留空间 */
  width: 100vw; /* 确保页面宽度为视口宽度 */
  overflow-x: hidden; /* 防止水平滚动 */
  box-sizing: border-box;
}

.bg-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700rpx;
  background: 
    /* 基础渐变层 */ linear-gradient(
      135deg,
      $primary-color 0%,
      rgba($primary-color, 0.8) 40%,
      rgba($warning-color, 0.6) 60%,
      rgba($warning-color, 0.3) 80%,
      rgba($warning-color, 0) 100%
    ),
    /* 波浪层1 - 左侧 */ radial-gradient(ellipse at 20% 70%, rgba($warning-color, 0.5) 0%, rgba($warning-color, 0) 60%),
    /* 波浪层2 - 右侧 */ radial-gradient(circle at 80% 40%, rgba($primary-color, 0.6) 0%, rgba($primary-color, 0) 50%),
    /* 波浪层3 - 中下部 */ radial-gradient(ellipse at 50% 90%, rgba($highlight-color, 0.4) 0%, rgba($highlight-color, 0) 70%);
  z-index: 0;
  /* 像素风格边缘 */
  mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
  mask-size: 100% 100%, 100% 16px;
  mask-position: 0 0, 0 bottom;
  mask-repeat: no-repeat;
}

.trade-menu {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx 10rpx;
  margin-bottom: 20rpx;
}
.trade-menu-card {
  width: 330rpx;
  height: 150rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2rpx solid #a3d2e6;
  transition: all 0.2s cubic-bezier(0.4, 1.2, 0.6, 1);
  cursor: pointer;
  margin-right: 20rpx;
}
.trade-menu-card:last-child {
  margin-right: 0;
}
.trade-menu-card.idle-card {
  background: #ffffff;
  border: 2rpx solid #fff3c2;
}
.trade-menu-card.reward-card {
  background: #f8f9fc;
  border: 2rpx solid #a3d2e6;
}
.trade-menu-card.active {
  background: linear-gradient(135deg, #5c7c9f 0%, #a3d2e6 100%);
  box-shadow: 0 6rpx 6rpx #5c7c9f, 0 2rpx 0 #fff3c2 inset;
  transform: scale(1.06);
  border: 3rpx solid #5c7c9f;
  filter: drop-shadow(0 0 12rpx #a3d2e6);
}
.trade-menu-card.active .trade-menu-title,
.trade-menu-card.active .trade-menu-info {
  color: #fff;
  text-shadow: 0 2rpx 8rpx #5c7c9f;
}
.trade-menu-content {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 24rpx;
  height: 100%;
}
.trade-menu-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.trade-menu-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  font-family: 'Pixelify Sans', sans-serif;
  color: #5c7c9f;
}
.trade-menu-info {
  font-size: 22rpx;
  color: #b3b9c2;
}
.trade-menu-card.active .trade-menu-title,
.trade-menu-card.active .trade-menu-info {
  color: #fff;
}
.trade-menu-icon {
  width: 76rpx;
  height: 76rpx;
  border-radius: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}
.trade-menu-icon.idle-icon {
  background-color: #a3d2e6;
}
.trade-menu-icon.reward-icon {
  background-color: #fff3c2;
}

.filter-bar {
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;

  .filter-box {
    display: flex;
    justify-content: space-between;

    .filter-item {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #666;

      tn-icon {
        margin-left: 4rpx;
      }
    }
  }
}

/* 新增内容容器样式 */
.content-container {
  flex: 1;
  position: relative;
  z-index: 5;
  /* 计算可用高度：100vh - 顶部padding - 菜单高度 - 底部TabBar高度 */
  height: calc(100vh - 200rpx - 190rpx);
  min-height: 500rpx;
  width: 100%;
  overflow: hidden; /* 防止内容超出 */
  box-sizing: border-box;
}

.content-swiper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.swiper-item {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20rpx; /* 减少padding值 */
}

.idle-list {
  padding: 20rpx; /* 只保留上下padding，左右padding由swiper-item提供 */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;

  .idle-item {
    width: 48%;
    background-color: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

    .idle-image {
      position: relative;
      width: 100%;
      height: 340rpx;

      image {
        width: 100%;
        height: 100%;
        display: block;
      }

      .idle-tag {
        position: absolute;
        top: 16rpx;
        left: 0;
        padding: 6rpx 16rpx;
        color: #ffffff;
        font-size: 24rpx;
        border-radius: 0 20rpx 20rpx 0;

        &.sell-tag {
          background-color: #32c5ff;
        }

        &.buy-tag {
          background-color: #ba68c8;
        }
      }
    }

    .idle-info {
      padding: 16rpx;

      .idle-title {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
        line-height: 1.4;
      }

      .idle-price {
        color: #ff5722;
        margin-bottom: 10rpx;

        .price-symbol {
          font-size: 24rpx;
        }

        .price-value {
          font-size: 36rpx;
          font-weight: bold;
        }
      }

      .idle-user {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;

        .user-avatar {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          margin-right: 8rpx;
        }

        .user-name {
          max-width: 100rpx;
          margin-right: 10rpx;
        }

        .idle-time {
          margin-left: auto;
        }
      }
    }
  }
}

.reward-list {
  padding: 20rpx; /* 只保留上下padding，左右padding由swiper-item提供 */
  box-sizing: border-box;

  .reward-item {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

    .reward-header {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;

      .reward-type {
        padding: 6rpx 12rpx;
        border-radius: 6rpx;
        color: #ffffff;
        font-size: 24rpx;
        margin-right: 12rpx;

        &.pickup {
          background-color: #32c5ff;
        }

        &.help {
          background-color: #ba68c8;
        }
      }

      .reward-title {
        flex: 1;
        font-size: 30rpx;
        font-weight: bold;
      }

      .reward-amount {
        color: #ff5722;
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .reward-content {
      margin-bottom: 16rpx;

      .reward-desc {
        font-size: 28rpx;
        line-height: 1.6;
        color: #333;
        margin-bottom: 12rpx;
      }

      .reward-address {
        display: flex;
        align-items: center;
        color: #666;
        font-size: 26rpx;

        tn-icon {
          margin-right: 6rpx;
        }
      }
    }

    .reward-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .reward-user {
        display: flex;
        align-items: center;

        .user-avatar {
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          margin-right: 10rpx;
        }

        .user-name {
          font-size: 26rpx;
          max-width: 180rpx;
        }
      }

      .reward-time {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.load-more-wrapper {
  width: 100%;
  padding: 10rpx 0 30rpx;
}

.load-more,
.no-more {
  display: flex;
  justify-content: center;
  align-items: center;
  color: $text-color-grey;
  font-size: 26rpx;
  padding: 30rpx 0;

  tn-loading {
    margin-right: 10rpx;
  }
}

// 内容卡片风格样式
.content-card {
  background: #fff;
  border-radius: 28rpx;
  box-shadow: 0 8rpx 32rpx rgba(163, 210, 230, 0.12), 0 2rpx 0 #ffeec2 inset;
  border: 2rpx solid #f8f9fc;
  padding-bottom: 10rpx;
  overflow: hidden;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .scroll-view {
    flex: 1;
    height: 0; /* 重要：配合flex使用，确保正确计算高度 */
    width: 100%;
    box-sizing: border-box;
  }
}
</style>
